<template>
	<div id="goods_store">
		<el-form :inline="true" size="medium">
			<el-form-item>
				<el-input placeholder="仓库名称" v-model="params.name" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search">搜索</el-button>
				<el-button  @click="dialogVisible = true">创建仓库</el-button>
				<!-- <el-button type="primary" @click="syncInfo(2)">同步爱代发礼品网</el-button>
				<el-button type="primary" @click="syncInfo(3)">同步就代发礼品网</el-button>
				<el-button type="primary" @click="syncInfo(4)">同步瑶瑶礼品网</el-button>
				<el-button type="primary" @click="syncXclpInfo(5)">同步星辰礼品网</el-button>
				<el-button type="primary" @click="syncInfo(6)">同步海淘礼品网</el-button>
				<el-button type="primary" @click="syncInfo(7)">同步代发发礼品网</el-button> -->
			</el-form-item>
		</el-form>

		<el-table :data="list" v-loading="loading" stripe>
			<el-table-column label="id" prop="id" align="center"></el-table-column>
			<el-table-column label="类型" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.other_type === 1">自有仓库</span>
					<span v-if="scope.row.other_type === 2">爱代发</span>
					<span v-if="scope.row.other_type === 3">就代发</span>
					<span v-if="scope.row.other_type === 4">瑶瑶</span>
					<span v-if="scope.row.other_type === 5">星辰</span>
					<span v-if="scope.row.other_type === 6">海淘</span>
					<span v-if="scope.row.other_type === 7">代发发</span>
				</template>
			</el-table-column>
			<el-table-column label="仓库名称" prop="name" align="center"></el-table-column>
			<el-table-column label="仓库地址" prop="address" align="center"></el-table-column>
			<el-table-column label="备注" prop="remark" align="center"></el-table-column>
			<el-table-column label="排序（倒序查询）" prop="sort" align="center"></el-table-column>
			<el-table-column label="暂停状态" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.stop_status === 1">未暂停</span>
					<span v-if="scope.row.stop_status === 2">已暂停</span>
				</template>
			</el-table-column>
			<el-table-column label="暂停理由" prop="stop_reason" align="center" show-overflow-tooltip></el-table-column>
			<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.status === 1">已开启</span>
					<span v-if="scope.row.status === 2">已关闭</span>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" prop="create_time" align="center">
				<template slot-scope="scope">
					{{$moment(scope.row.create_time).format('Y-MM-DD HH:mm')}}
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="setData(scope.row)">修改</el-button>
					<el-button type="text" class="error" @click="del(scope.row.id)" >删除</el-button>
					<!-- <el-button type="text" class="error" @click="del(scope.row.id)" v-if="scope.row.otherType==1">删除</el-button> -->
				</template>
			</el-table-column>
		</el-table>

		<el-pagination 
			class="page"
			background
			@size-change="handleSizeChange" 
			@current-change="getList" 
			:current-page.sync="params.pageNo" 
			:page-sizes="[10, 20, 50, 100]" 
			:page-size="params.pageSize" 
			layout="total, sizes, prev, pager, next, jumper" 
			:total="total">
		</el-pagination>
		
		<el-dialog 
			:title="formData.id ? '修改': '添加'" 
			:visible.sync="dialogVisible" 
			width="400px" 
			center 
			:before-close="handleClose"
			:close-on-click-modal="false"
		>
			<el-form :model="formData" :rules="rules" ref="formData" label-width="80px">
				<el-form-item label="仓库名称" prop="name">
					<el-input v-model="formData.name" placeholder="请输入仓库名称"></el-input>
				</el-form-item>
				<el-form-item label="仓库地址" prop="address">
					<el-input v-model="formData.address" placeholder="请输入仓库地址"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="formData.remark" placeholder="可在此填写备注"></el-input>
				</el-form-item>
				<el-form-item label="排序（倒序查询）" prop="sort">
					<el-input v-model="formData.sort" placeholder="可在此填写排序（倒序查询）"></el-input>
				</el-form-item>
				<el-form-item label="tb一键下单" prop="pddStatus">
					<el-radio-group v-model="formData.tbStatus">
						<el-radio :label="1">启用</el-radio>
						<el-radio :label="2">停用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="pdd一键下单" prop="pddStatus">
					<el-radio-group v-model="formData.pddStatus">
						<el-radio :label="1">启用</el-radio>
						<el-radio :label="2">停用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="dy一键下单" prop="douyinStatus">
					<el-radio-group v-model="formData.douyinStatus">
						<el-radio :label="1">启用</el-radio>
						<el-radio :label="2">停用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="暂停状态" prop="stopStatus">
					<el-radio-group v-model="formData.stopStatus">
						<el-radio :label="1">不暂停</el-radio>
						<el-radio :label="2">暂停</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="暂停理由" prop="stopReason" v-if="formData.stopStatus==2">
					<el-input v-model="formData.stopReason" placeholder="请输入暂停理由"></el-input>
				</el-form-item>
				<el-form-item label="是否开启">
					<el-radio-group v-model="formData.status">
						<el-radio label='1'>开启</el-radio>
						<el-radio label='2'>关闭</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div class="align-center">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="write" :loading="formLoading">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					pageNo: 1,
					pageSize: 10,
					isCount: true,
					name: '',
				},
				list: [],
				total: 0,
				loading: false,
				formLoading: false,
				dialogVisible: false,
				formData: {
					name: '',
					address: '',
					remark: '',
					status:'1',
					sort:'',
					tbStatus:1,
					pddStatus:1,
					douyinStatus:1,
					stopStatus:1,
					stopReason:'',
				},
				rules: {
					name: {
						message: '请输入仓库名称',
						trigger: 'blur',
						required: true
					},
					sort: {
						message: '请输入排序',
						trigger: 'blur',
						required: true
					}
				},
			};
		},

		watch: {},

		create() {},

		mounted() {
			this.search();
		},

		methods: {
			handleClose(done){
				this.reset()
				done();
			},
			
			handleSizeChange(value) {
				this.params.pageSize = value 
				this.search()
			},
			
			search(){
				this.params.pageNo = 1
				this.params.isCount = true 
				this.getList();
			},
			
			getList() {
				this.loading = true
				this.$request.post({
					url: '/ReportApi/admin/storelist',
					params: this.params,
					success: result =>{
						this.list = result[0] 
						if(this.params.isCount){
							this.params.isCount = false 
							this.total = result[1]
						}
					},
					finally: ()=>{
						this.loading = false 
					}
				})
			},
			
			del(id) {
				this.$confirm('确认删除?', '提示').then(() => {
					this.$request.post({
						url: '/ReportApi/admin/storedel',
						params: {
							id
						},
						success: result => {
							this.$message.success('删除成功')
							if (this.params.pageNo > 1 && this.list.length < 2) {
								this.params.pageNo--
							}
							this.getList();
						}
					})
				})
			},
			
			setData(data){
				this.formData.id = data.id 
				this.formData.name = data.name
				this.formData.address = data.address
				this.formData.remark = data.remark
				this.formData.status = data.status + ''
				this.formData.sort = data.sort
				this.formData.tbStatus = data.tb_status
				this.formData.pddStatus = data.pdd_status
				this.formData.douyinStatus = data.douyin_status
				this.formData.stopStatus = data.stop_status
				this.formData.stopReason = data.stop_season
				this.dialogVisible = true 
			},
			
			write(){
				this.$refs['formData'].validate((valid) => {
					if(valid){
						if(this.formLoading){
						 	return; 
						}
						this.formLoading = true
						var url = '/ReportApi/admin/' + (this.formData.id ? 'storeupdate' : 'storeadd') 
						this.$request.post({
							url,
							params: this.formData,
							success: result => {
								this.$message.success('操作成功')
								this.dialogVisible = false 
								this.reset()
								this.search()
							},
							finally: ()=>{
								this.formLoading = false 
							}
						})
					}
				})
			},
			
			reset(){
				this.formData.id = ''
				this.formData.name = ''
				this.formData.address = ''
				this.formData.remark = ''
				this.formData.sort = '' 
				this.formData.status = '1'
			},
			
			// syncInfo(type){
			// 	this.$confirm('确认同步礼品网信息?', '提示').then(() => {
			// 		this.loading = true
			// 		this.$request.post({
			// 			url: 'ad/goodsStore/syncInfo',
			// 			params: {
			// 				type:type
			// 			},
			// 			success: result => {
			// 				this.$message.success('同步成功');
			// 				getList();
			// 			},
			// 			finally: ()=>{
			// 				this.loading = false 
			// 			}
			// 		})
			// 	})
			// },

			// syncXclpInfo(type){
			// 	this.$confirm('确认同步礼品网信息?', '提示').then(() => {
			// 		this.loading = true
			// 		this.$request.post({
			// 			url: 'ad/goodsStore/syncXclpInfo',
			// 			params: {
			// 				type:type
			// 			},
			// 			success: result => {
			// 				this.$message.success('同步成功');
			// 				getList();
			// 			},
			// 			finally: ()=>{
			// 				this.loading = false 
			// 			}
						
			// 		})
			// 	})
			// },
			
		},

		beforeDestroy() {}
	}
</script>

<style>

</style>

<style lang="scss" scoped>
	.page{
		text-align: right;
		margin-top: 20px;
	}
</style>
